<template>
	<div class="sc-form-table">
		<!--:summary-method="getSummaries" -->
		<el-table
			:data="data"
			ref="table"
			:rules="rules"
			:key="toggleIndex"
			:show-summary="showSummary"
			:summary-method="getSummaries"
			border
			:height="maxHeight"
			stripe
		>
			<el-table-column
				type="selection"
				width="50"
				v-if="!dragSort"
			></el-table-column>
			<el-table-column
				type="index"
				width="50"
				fixed="left"
				v-if="dragSort"
			>
				<template #header>
					<el-button
						type="primary"
						icon="el-icon-plus"
						size="small"
						circle
						@click="rowAdd"
					></el-button>
				</template>
				<template #default="scope">
					<div class="sc-form-table-handle">
						<span>{{ scope.$index + 1 }}</span>
						<el-button
							type="danger"
							icon="el-icon-delete"
							size="small"
							plain
							circle
							@click="rowDel(scope.row, scope.$index)"
						></el-button>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="" width="58" v-if="dragmove">
				<template #header>
					<el-button
						type="primary"
						icon="el-icon-CircleCheck"
						size="small"
						circle
						@click="rowAddList"
					></el-button>
				</template>
				<template #default>
					<el-tag class="move" style="cursor: move"
						><el-icon-d-caret style="width: 1em; height: 1em"
					/></el-tag>
				</template>
			</el-table-column>
			<slot></slot>
			<template #empty>
				{{ placeholder }}
			</template>
		</el-table>
	</div>
</template>

<script>
import Sortable from "sortablejs";

export default {
	props: {
		modelValue: { type: Array, default: () => [] },
		addTemplate: { type: Object, default: () => {} },
		addTemplateList: { type: Array, default: () => [] },
		placeholder: { type: String, default: "暂无数据" },
		dragSort: { type: Boolean, default: false },
		dragmove: { type: Boolean, default: false },
		dialogChoice: { type: Boolean, default: false },
		objName: { type: String, default: "goodsChoice" },
		calculateSum: { type: Array, default: () => [] },
		maxHeight: { type: String, default: "auto" },
		rules: {},
		showSummary: { type: Boolean, default: true },
	},
	data() {
		return {
			data: [],
			toggleIndex: 0,
		};
	},
	mounted() {
		this.data = this.modelValue;
		if (this.dragSort) {
			this.rowDrop();
		}
	},
	watch: {
		modelValue() {
			this.data = this.modelValue;
		},
		data: {
			handler() {
				this.$emit("update:modelValue", this.data);
			},
			deep: true,
		},
	},
	methods: {
		rowDrop() {
			const _this = this;
			const tbody = this.$refs.table.$el.querySelector(
				".el-table__body-wrapper tbody"
			);
			Sortable.create(tbody, {
				handle: ".move",
				animation: 300,
				ghostClass: "ghost",
				onEnd({ newIndex, oldIndex }) {
					const tableData = _this.data;
					const currRow = tableData.splice(oldIndex, 1)[0];
					tableData.splice(newIndex, 0, currRow);
					_this.toggleIndex += 1;
					_this.$nextTick(() => {
						_this.rowDrop();
					});
				},
			});
		},
		rowAdd() {
			const temp = JSON.parse(JSON.stringify(this.addTemplate));
			this.data.push(temp);
		},
		rowAddList() {
			//alert("aaabb")
			// eslint-disable-next-line no-debugger
			//debugger;
			// eslint-disable-next-line vue/no-mutating-props
			this.$emit("callBackProcess");
			// const temp = JSON.parse(JSON.stringify(this.addTemplateList));
			// if (temp && temp.length > 0) {
			// 	temp.forEach((element) => {
			// 		this.data.push(element);
			// 	});
			// 	this.data.push(temp);
			// }
		},
		rowDel(row, index) {
			this.data.splice(index, 1);
			this.$emit("deletSubObjDelegete", row);
		},
		getSummaries(param) {
			//let result= this.$emit("calculateSumDelegete", param);
			//return result;
			// eslint-disable-next-line no-debugger
			//debugger;
			//this.$alert("aaaaaa", "提示", { type: "error" });
			const { columns, data } = param;
			console.log(columns, data);
			const sums = [];
			// eslint-disable-next-line no-debugger
			//debugger;
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = "合计";
					return;
				} else {
					let result = this.calculateSum.find(
						(v) => v.name == column.property
					);
					if (result) {
						sums[index] = result.value;
					} else sums[index] = "";
					return;
				}
				// if (index === 7) {
				// 	sums[index] = this.calculateSum.ItemSum;
				// 	return;
				// }
			});
			// eslint-disable-next-line no-debugger
			//debugger;
			return sums;
			/*
			const sums = [];
			//let calculateSum='data[i]["ItemAmount"] =Number(data[i]["OutStoreQty"]) *Number(data[i]["Price"]);'
			//let cols=["OutStoreQty","ItemAmount"]
			// eslint-disable-next-line no-debugger
			////debugger
			// data.forEach((item, index,data) => {
			// 	data[item]["ItemAmount"] =
			// 		Number(data[index]["OutStoreQty"]) *
			// 		 Number(data[index]["Price"]);
			// 		//console.log(data,index);
			// });
			if (
				data &&
				data.length > 0 &&
				this.calculateSum &&
				this.calculateSum.length > 2
			) {
				for (let i = 0; i < data.length; i++) {
					// data[i]["ItemAmount"] =
					// 	Number(data[i]["OutStoreQty"]) *
					// 	Number(data[i]["Price"]);
					eval(this.calculateSum);
				}
			}
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = "合计";
					return;
				}
				// eslint-disable-next-line no-debugger
				////debugger
				// 可以用index设置 因为项目会动态改变列 所以用了name
				if (
					// column.property == "ExpectQty" ||
					// column.property == "OutStoreQty" ||
					// column.property == "DamageQty" ||
					// column.property == "FreeQty" ||
					// column.property == "ItemAmount"
					this.calculateList.indexOf(column.property) >= 0
				) {
					const values = data.map((item) =>
						Number(item[column.property])
					);
					if (!values.every((value) => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								return prev + curr;
							} else {
								return prev;
							}
						}, 0);
					} else {
						sums[index] = "";
					}
				}
			});
			// eslint-disable-next-line no-debugger
			//debugger;
			return sums;
			*/
		},
	},
};
</script>

<style scoped>
.sc-form-table {
	width: 100%;
}
.sc-form-table .sc-form-table-handle {
	text-align: center;
}
.sc-form-table .sc-form-table-handle span {
	display: inline-block;
}
.sc-form-table .sc-form-table-handle button {
	display: none;
}
.sc-form-table .hover-row .sc-form-table-handle span {
	display: none;
}
.sc-form-table .hover-row .sc-form-table-handle button {
	display: inline-block;
}
/* .el-table .el-table__cell{
	text-align:right;
} */
</style>
